<template>
	<view class="welfare">
		<view class="header"></view>
		<view class="RankingList">
			<view class="tabber">
				捐款排名
			</view>
			<view class="rankBox">
				<view class="rankBox-item">
					排名
				</view>
				<view class="rankBox-item">
					用户名
				</view>
				<view class="rankBox-item">
					爱心值
				</view>
			</view>
			<view class="viewArea">
				<view class="rankBox dataBox" v-for="(item,index) in list.records" :key="item">
					<view class="rankBox-item ">
						<image src="@/static/statc-icon/rank_1.png" class='bankIcon' mode="" v-if='index==0'></image>
						<image src="@/static/statc-icon/rank_2.png" class='bankIcon' mode="" v-else-if='index==1'>
						</image>
						<image src="@/static/statc-icon/rank_3.png" class='bankIcon' mode="" v-else-if='index==2'>
						</image>
						<span v-else>{{index+1}}</span>
					</view>
					<view class="rankBox-item" style='white-space: nowrap;'>
						<image :src="item.avatar" class='avatarSize' mode=""></image>
						{{item.userPhone}}
					</view>
					<view class="rankBox-item">
						{{item.availableBalance}}
					</view>
				</view>
			</view>



		</view>
		<!-- <view class="current_rank">
			<view class="rankBox-item">
				{{list.rank}}
			</view>
			<view class="rankBox-item">
				{{username}}
			</view>
			<view class="rankBox-item" style="color:#fff">
				{{list.availableBalance}}
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getWelfareRank
	} from "@/api/api.js"
	export default {
		name: "welfare",
		data() {
			return {
				list:[],
				username:uni.getStorageSync("userName")
			}
		},
		mounted() {
			this.handleWelfare()
		},
		methods: {
			handleWelfare() {
				getWelfareRank({
					pageNum: 1,
					pageSize: 50
				}).then(res => {
					console.log(res)
					
					this.list = res.data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.header {
		width: 100vw;
		height: 328rpx;
		background: url("@/static/static-home/image-49.png") no-repeat;
		background-size: 100% 100%;

	}

	.welfare {
		width: 100vw;
		min-height: 100vh;
		height: auto;
		position: relative;

		.RankingList {
			width: 100vw;
			height: calc(100vh - 588rpx);
			background: #fff;
			border-top-right-radius: 50rpx;
			border-top-left-radius: 50rpx;
			position: absolute;
			top: 288rpx;
			left: 0;
			padding: 40rpx;
			box-sizing: border-box;

			.tabber {
				font-weight: 400;
				font-size: 36rpx;
				color: #000000;
				position: relative;
				text-align: center;
			}

			.tabber:before {
				content: '';
				width: 80rpx;
				height: 4rpx;
				background: #EB3B27;
				position: absolute;
				top: 50%;
				bottom: 50%;
				transform: translateY(-50%);
				display: block;
				left: 164rpx;

			}

			.tabber::after {
				content: '';
				width: 80rpx;
				height: 4rpx;
				background: #EB3B27;
				position: absolute;
				top: 50%;
				bottom: 50%;
				transform: translateY(-50%);
				display: block;
				right: 164rpx;

			}

			.viewArea {
				width: 100%;
				height: calc(100vh - 700rpx);
				overflow-y: auto;
			}

			.rankBox {
				display: grid;
				// grid-template-columns: repeat(3, 200rpx 1fr 400rpx);
				grid-template-columns: 200rpx 1fr 1fr;
				margin-top: 20rpx;


				.rankBox-item {
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;

					.bankIcon {
						width: 44rpx;
						height: 44rpx;
					}
				}


			}

			.dataBox {
				height: 100rpx;
				border-bottom: 2rpx solid #F6F6F7;
				align-items: center;
			}



		}

		.current_rank {
			width: 670rpx;
			height: 114rpx;
			background: #00C538;
			border-radius: 20rpx;
			display: grid;
			grid-template-columns: 200rpx 1fr 1fr;
			margin-top: 20rpx;
			position: fixed;
			bottom: 58rpx;
			left: 40rpx;

			.rankBox-item {
				width: 222rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;


			}

			.rankBox-item:first-child {
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
			}

			.rankBox-item:nth-child(2) {
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	
	.avatarSize{
		width: 44rpx;
		height: 44rpx;
		border-radius: 130rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}
</style>